In diesem Kapitel schauen wir uns einige CSS-Konzepte an. Dazu gehören ID versus Class, die shorthand-Eigenschaften sowie die Kaskadierung und Vererbung.

Für Klassen wird in der CSS-Definition vor dem Namen ein Punkt geschrieben. Für eine ID wird in der CSS-Definition vor dem Namen ein Hash-Zeichen geschrieben. Die vergebenen Namen dürfen keinerlei Sonderzeichen und Umlaute (ö, ä, ü, ß) enthalten und keine Leerzeichen. Die Namen sind case sensitive, also am besten alles klein schreiben.

CSS-Elemente können sowohl über class gleich Klassenname, als auch über ID gleich ID-Name angesprochen werden. Im folgenden Beispiel wird das anhand von Absätzen (p) und Hervorhebungen (strong) gezeigt. Das Besondere an class ist, dass damit mehrere Elemente ausgezeichnet werden können, dagegen die ID nur für ein Element pro HTML-Seite verwendet werden darf. ID dient also zur eindeutigen Bestimmung eines Elementes.

ID-Bereiche haben mehr Gewicht. Wenn also sowohl eine ID als auch eine Klasse vergeben wurde, werden die CSS-Angaben der ID verwendet.

Wann nimmt man class? Über die Klassen können stattdessen sich wiederholende Designelemente bestimmt werden. Im folgenden Beispiel werden im Text mehrere Stellen mit einer Art Textmarker hervorgehoben.

Und wann nimmt man ID? Elemente, die es nur einmal gibt, zum Beispiel die Navigation, sollten mit einer ID und dem dazugehörigen CSS-Design ausgestattet werden.

Kommen wir nun zu den shorthand-Eigenschaften von CSS.

In CSS können Werte für Eigenschaften zugewiesen werden, die miteinander verwandt sind. Ein Beispiel hierfür ist font-family für die Schriftart, font-size für die Schriftgröße, font-weight für die Schriftstärke und so weiter. All diese Eigenschaften gehören zu der Familie "font", also Schrift. Ein anderes Beispiel sind die inneren Abstände: padding-top, padding-right, padding-bottom und padding-left, die alle zur Familie "padding" gehören.

In einer CSS-Regel können diese Eigenschaften einzeln angegeben werden. In dem Fall muss man für jede Eigenschaft den dazugehörigen Wert angeben. Hier haben wir ein Beispiel für die vollen Angaben des padding:

Bei manchen Eigenschaften ist es möglich, statt der einzelnen Eigenschaft-Werte-Paare die "Familie" anzugeben, zu der die Eigenschaften gehören. Anstelle von padding-top, padding-right, padding-bottom und padding-left könnte man auch lediglich die Eigenschaft padding angeben. Solche Eigenschaften werden in CSS Shorthand-Eigenschaften genannt. Wenn die einzelnen Werte für padding identisch sind, dann genügt ein einzelner Eintrag: padding gleich zehn Pixel.

Wenn die einzelnen Werte nicht identisch sind, so ist die Shorthand-Kurzschreibweise trotzdem möglich. Mehrere Werte werden dann mit einem Leerzeichen getrennt. In dem Fall muss man jedoch die Reihenfolge beachten. Beim padding beginnt man mit Top und die restlichen Werte gelten für die übrigen Eigenschaften im Uhrzeigersinn, also top, right, bottom und left. Man kann auch nur zwei individuelle Werte durch Leerzeichen getrennt angeben, dann gilt oben und unten gemeinsam sowie rechts und links gemeinsam. Man kann auch nur drei individuelle Werte durch Leerzeichen getrennt angeben, dann gilt oben, rechts und links gemeinsam sowie unten.

Kommen wir nun zur Kaskadierung und Vererbung bei CSS.

Die Möglichkeit der Kaskadierung ist eine Kernidee der CSS! Wenn es für ein Element mehrere Regeln für ein Attribut (zum Beispiel color) gibt, dann gilt folgende Rangfolge: Zuerst kontextabhängig individuell, vor individuell, vor kontextabhängiger Klasse, vor allgemeiner Klasse und vor redefiniertem Standardformat. Die Reihenfolge in einer Datei bestimmt das letzte Kriterium. Und es gilt die Regel: "inline" vor "embedded" vor externem Stylesheet.

Hier sehen Sie ein Beispiel einer kaskadierten Definition, auf der die Prioritätenliste anzuwenden ist. Der erste Eintrag ist letztlich rot, der zweite gelb und der dritte grün.

Bitte ermitteln Sie anhand der eben definierten Vererbungshierarchie, warum das so ist.

Kommen wir nun zur Vererbung von Formaten. Wenn es für ein Element kein direktes Format gibt, wird das Format des übergeordneten Elements übernommen! Die Vererbung folgt dem Dokumenten-Baum. Manche Attribute werden aber nicht mit-vererbt! In diesem Beispiel wird das Grün aus dem Body für den ersten Absatz mit vererbt. Im zweiten Absatz wird Blau als neue Farbe für diesen Absatz definiert, was die Vererbung überschreibt. Der dritte Absatz befindet sich in einem div-Element, welches Rot als Farbe definiert und damit das Grün überschreibt. Der dritte Absatz bekommt daher das Rot vererbt.

Abschließend sollten Sie wissen, was vererbt wird und was nicht. Angaben zum Hintergrund und zur Positionierung werden generell nicht vererbt. Angaben zu Listen und zu Text werden vererbt, bis auf die text-decoration. Beim Rahmen wird border-collapse und spacing vererbt, color, style und width aber nicht.

Weitere Elemente werden nicht vererbt bis auf die visibility, was auch sinnvoll ist. Bei Tabellen wird letztlich nur noch caption-side vererbt.